<template>
  <div>
    <div id="darkmode" class="darkmode-ignore"></div>
  </div>
</template>

<script>
import Darkmode from 'darkmode-js'
export default {
  data () {
    return {

    }
  },

  created () {

  },
  mounted () {
    this.darkmode()
  },
  methods: {
    darkmode () {
      const options = {
        bottom: '64px', // default: '32px'
        time: '0.5s', // default: '0.3s'
        mixColor: '#fff', // default: '#fff'
        backgroundColor: '#fff', // default: '#fff'
        buttonColorDark: '#100f2c', // default: '#100f2c'
        buttonColorLight: '#fff', // default: '#fff'
        saveInCookies: false, // default: true,
        label: '🌓', // default: ''
        autoMatchOsTheme: true // default: true
      }
      const darkmode = new Darkmode(options)
      darkmode.showWidget()
    }
  }
}
</script>

<style  lang='scss'>
 .darkmode-layer, .darkmode-toggle {
  z-index: 999;
}
.darkmode--activated img {
isolation: isolate;
mix-blend-mode: difference;
}
/* elements that create their a stacking context are automatically isolated */
.footer {
z-index: 1;
}

.darkmode--activated .photo-background {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated img {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated .photo-background {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
.darkmode--activated #comment {
filter: brightness(60%);
-webkit-filter: brightness(60%);
isolation: isolate;
mix-blend-mode: difference;
}
@media screen and (max-width:760px) {
.darkmode-layer, .darkmode-toggle {
display:none;
}
}
.darkmode--activated .form-control {
color:#ffffff
}

.darkmode-toggle{
border-radius:0;
width: 50px;
height: 50px;
background: #848484;
box-shadow: 0 0 10px rgba(0,0,0,.05);
white-space: nowrap;
-webkit-transition: all .3s;
transition: all .3s;
outline:none;
}
</style>
